@import '~antd/es/style/themes/default.less';
//@import './utils/utils.less';

.box {
    position: relative;
}

.boxTop {
    position: relative;

    animation: moveTop;
    animation-duration: 2s;

    /* Safari and Chrome */
    -webkit-animation: moveTop;
    -webkit-animation-duration: 2s;
}

.boxBottom {
    position: relative;

    animation: moveBottom;
    animation-duration: 2s;

    /* Safari and Chrome */
    -webkit-animation: moveBottom;
    -webkit-animation-duration: 2s;
}

.boxRight {
    position: relative;

    animation: moveRight;
    animation-duration: 2s;

    /* Safari and Chrome */
    -webkit-animation: moveRight;
    -webkit-animation-duration: 2s;
}

.hide {
    display: none;
}

@keyframes moveTop {
    from {
        top: 50px;
    }
    to {
        top: 0px;
    }
}

@-webkit-keyframes moveTop /* Safari and Chrome */ {
    from {
        top: 50px;
    }
    to {
        top: 0px;
    }
}

@keyframes moveRight {
    from {
        left: -100px;
    }
    to {
        left: 0;
    }
}

@-webkit-keyframes moveRight /* Safari and Chrome */ {
    from {
        left: -100px;
    }
    to {
        left: 0;
    }
}

@keyframes moveBottom {
    from {
        bottom: 0px;
    }
    to {
        bottom: -50px;
    }
}

@-webkit-keyframes moveBottom /* Safari and Chrome */ {
    from {
        bottom: 0px;
    }
    to {
        bottom: -50px;
    }
}

@keyframes myfirst {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }
    75% {
        background: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }
    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }
    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }
    75% {
        background: green;
        left: 0px;
        top: 200px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}
